<template>
  <mapbox class="box" v-model="chinaMap"></mapbox>
</template>
  
  <script>
import axios from "axios";
import * as echarts from "echarts";
import "echarts-gl";
export default {
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      axios({
        method: "get",
        baseURL: "/mapjson/110000.json",
      }).then((res) => {
        this.initMap("11100000000", res.data);
      });
    },
    initMap(name, data) {
      echarts.registerMap(name, data); // 注册矢量地图数据
      let map = echarts.init(this.$refs.chinaMap);
      let option = {
        tooltip: {
          show: true,
          triggerOn: "mousemove", //鼠标hover地图区域时出现
          trigger: "item",
          formatter: function (params) {
            // console.log(params,'params')
            //返回的是dom结构，可以在这里写好样式，也可以使用下面的配置项去设置样式
            return `<div style="position:absolute;left:10px;top:16px;width:8px;height:8px;background-color:#FD9A5A;"></div>
                        <div class="tips" style="padding:12px;">
                            <h1 style="font-size:16px;">${params.name}</h1>
                            <p style="font-size:16px;">
                                <span style="color:#03dbf3;font-size:30px;display:inline-block;padding:5px 0">${params.value}</span>
                            </p>
                        </div>`;
          },
          //这里就是设置地图自带的弹框样式
          borderColor: "#419bf9",
          borderWidth: 1,
          //   padding: [0, 15],
          // backgroundColor: '#0a1d54',
          backgroundColor: "rgba(0,2,89,0.8)",
          borderRadius: 0,
          textStyle: { color: "#fff" },
        },
        series: [
          {
            type: "map3D",
            map: name,
            selectedMode: "single", //地图高亮单选
            regionHeight: 5, //地图高度
            boxDepth: 145, //地图倾斜度
            viewControl: {
              alpha: 50,
              center: [0, -30, 0], //位置点
              distance: 170, //地图视角 控制初始大小
              rotateSensitivity: [2, 2],
              zoomSensitivity: 0, //缩放操作的灵敏度
              panSensitivity: 0, //平移操作的灵敏度
              // rotateMouseButton: "left", //旋转操作使用的鼠标按键
              // panMouseButton: "right", //平移操作使用的鼠标按键
              // maxBeta: 720,
              // autoRotate: true, //是否旋转
              // autoRotateDirection: "cw",
              // autoRotateDirection: 10,
              // autoRotateDirection: 3,
            },
            label: {
              show: true, //是否显示市
              textStyle: {
                color: "#fff", //文字颜色
                fontSize: 18, //文字大小
                // fontWeight: 700,
                textBorderColor: "#333",
                textBorderWidth: 1,
              },
            },
            itemStyle: {
              color: "rgba(63, 81, 181,0.95)", //地图颜色
              borderWidth: 2, //分界线wdith
              borderColor: "rgba(9, 80, 229,0.15)", //分界线颜色
              opacity: 1,
            },
            emphasis: {
              label: {
                show: true, //是否显示高亮
                textStyle: {
                  color: "#fff", //高亮文字颜色
                },
              },
              itemStyle: {
                color: "#ff960c", //地图高亮颜色
              },
            },
            data: [{ name: "延庆区", value: 122 }],
          },
        ],
      };
      map.setOption(option, true);
    },
  },
};
</script>

<style lang="css" scoped>
.box {
  width: 926px;
  height: 746px;
}
</style>